<template>
  <div class="pt-page__home">
    <system-menu></system-menu>
    <div class="taizhang">
      <div class="pt-tabs">
        <div class="pt-tabs__header">
          <span @click="tabIndex = 0" class="pt-tabs__action" :class="{active: tabIndex == 0}">
            <span>任务流程</span>
          </span>
          <span @click="tabIndex = 1" class="pt-tabs__action" :class="{active: tabIndex == 1}">
            <span>工作台账</span>
          </span>
        </div>
        <div class="pt-tabs__content">
          <div v-show="tabIndex == 0" class="pt-tabs__pane">
            <div class="task">
              <div class="kind-header">
                <span
                  class="action"
                  @click="taskKindIndex = 0"
                  :class="{active: taskKindIndex == 0}"
                >我承办的任务(12)</span>
                <span class="line">|</span>
                <span
                  class="action"
                  @click="taskKindIndex = 1"
                  :class="{active: taskKindIndex == 1}"
                >我分配的任务(12)</span>
                <span class="line">|</span>
                <span
                  class="action"
                  @click="taskKindIndex = 2"
                  :class="{active: taskKindIndex == 2}"
                >我监督的任务(12)</span>
              </div>
              <div class="kind-body">
                <div v-show="taskKindIndex == 0" class="kind-item">
                  <div class="task-list clearfix">
                    <div v-for="item in 10" class="task-item">
                      <div class="item-inner">
                        <div class="item-header">
                          <span class="name">任务名</span>
                          <span class="bz">（经办人发起）</span>
                        </div>
                        <div class="item-body">
                          <div class="row clearfix">
                            <div class="left">
                              <span>事项：华景919-2018</span>
                            </div>
                            <div class="right">
                              <span class="pt-icon right-arrow"></span>
                            </div>
                          </div>
                          <div class="row clearfix">
                            <div class="left">
                              <span>发起人：李四四</span>
                            </div>
                            <div class="right">
                              <span>2018-9-19</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="taskKindIndex == 1" class="kind-item">2</div>
                <div v-show="taskKindIndex == 2" class="kind-item">3</div>
              </div>
            </div>
          </div>
          <div v-show="tabIndex == 1" class="pt-tabs__pane">2</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 系统菜单
import systemMenu from "./Apps.vue";
export default {
  data () {
    return {
      tabIndex: 0,
      taskKindIndex: 0
    };
  },
  components: {
    "system-menu": systemMenu
  }
};
</script>

<style lang="less" scoped>
.pt-page__home {
  margin: 0 10px;
  background-color: white;
}
.taizhang {
  padding-top: 10px;
}
.pt-tabs__action {
  display: inline-block;
  padding: 10px 26px;
  background-color: @bgColor1;
  border-radius: 6px 6px 0 0;
  box-shadow: 0px -1px 3px 0px rgba(23, 40, 60, 0.2);
  span {
    font-size: 12px;
    color: @fColor3;
  }
  &.active {
    background-color: #fff;
    span {
      font-weight: 700;
      color: @fColor1;
    }
  }
}
.pt-tabs__content {
  box-shadow: 0px 0px 4px 0px rgba(23, 40, 60, 0.3);
  padding: 10px;
}
.task {
  .kind-header {
    margin-bottom: 10px;
    .action {
      cursor: pointer;
      font-size: 14px;
      &.active {
        color: @primary;
      }
    }
    .line {
      padding: 0 10px;
    }
  }
  .task-list {
    .task-item {
      float: left;
      width: 50%;
      border-left: 4px solid @fColor1;
      margin-bottom: 10px;
      .item-header {
        background-color: @bgColor1;
        padding: 12px 0;
        padding-left: 6px;
        .name {
          font-size: 14px;
          font-weight: 700;
          color: @fColor1;
        }
        .bz {
          font-size: 12px;
        }
      }
      .item-body {
        padding: 6px 12px;
        .row {
          padding: 6px 0;
          .left {
            float: left;
          }
          .right {
            float: right;
          }
        }
      }
    }
    .item-inner {
      cursor: pointer;
      box-shadow: 0px 0px 4px 0px rgba(23, 40, 60, 0.3);
      margin-right: 10px;
    }
  }
}
</style>